<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第二次作业四</title>
</head>


<div id="app">
   <img :src="img">
    <img :src="img2">
    <button @click="checkThis()">点击切换图片</button>
</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                img: "img1.jpg",
                img2: "img2.jpg",
                grade: 80,
                message: '未输入成绩',
                lists: [{message: 'Foo'}, {message: 'Bar'}]
            }
        },
        watch: {
            grade:{
                handler: function (newValue,oldValue){
                    console.log(this.message);
                    this.$nextTick(function () {
                        this.checkThis();
                    })
                },
                deep:true
            }
        },
        methods: {
            checkThis() {
                const temp = this.img;
                this.img = this.img2;
                this.img2 = temp;
            }
        }

    }).mount('#app')
</script>